<template>
	<tm-fullView>
		<template v-slot:default="{info}">
			<view class="grey text " :class="$tm.vx.state().tmVuetify.black?'black bk':''" :style="{minHeight:info.height+'px'}">
				<tm-menubars title="快捷城市选择" color="bg-gradient-blue-accent" :showback="true"></tm-menubars>
				
				<tm-sheet :shadow="24">
					<view class="pb-n16">当前选择:{{defaultValue_str}}</view>
					<tm-quickCity  color="blue" :defaultValue.sync="defaultValue">
						<tm-button block theme="bg-gradient-blue-accent">显示快速城市选择</tm-button>
					</tm-quickCity>
				</tm-sheet>
				<tm-sheet :shadow="24">
					<tm-quickCity :black="true" color="blue" :defaultValue.sync="defaultValue">
						<tm-button black block theme="bg-gradient-blue-accent">暗黑模式</tm-button>
					</tm-quickCity>
				</tm-sheet>
				
				<view style="height: 90rpx;"></view>
			</view>
		</template>
	</tm-fullView>

</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmQuickCity from "@/tm-vuetify/components/tm-quickCity/tm-quickCity.vue"
	import tmButton from "@/tm-vuetify/components/tm-button/tm-button.vue"
	
	export default {
		components:{tmFullView,tmSheet,tmMenubars,tmQuickCity,tmButton
		},
		data() {
			return {
				defaultValue:[],
				
			};
		},
		computed: {
			defaultValue_str() {
				return JSON.stringify(this.defaultValue )
			}
		},
	}
</script>

<style lang="scss">
page,body{
	background: none;
}
</style>
